<template>
    <el-card id="login" v-loading.fullscreen.lock="loading">
        <el-form id="index1" :model="userData">
            <el-form-item id="user">
                <el-input v-model="userData.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item id="pass">
                <el-input :type="showPassType" v-model="userData.password" placeholder="密码">
                    <i slot="suffix" class="el-icon-view" @click="showPass()" />
                </el-input>
            </el-form-item>
            <el-form-item id="captch">
                <table id="captchTable" :style="captchImg">
                    <tr style="height: 32px">
                        <td @click="getCaptch()"></td>
                    </tr>
                    <tr>
                        <td @click="clickCaptch(0)" :class="userData.pos0 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(1)" :class="userData.pos1 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(2)" :class="userData.pos2 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(3)" :class="userData.pos3 ? 'isSelect':'notSelect'"></td>
                    </tr>
                    <tr>
                        <td @click="clickCaptch(4)" :class="userData.pos4 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(5)" :class="userData.pos5 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(6)" :class="userData.pos6 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(7)" :class="userData.pos7 ? 'isSelect':'notSelect'"></td>
                    </tr>
                </table>
            </el-form-item>
            <el-form-item id="buttonLogin">
                <el-button style="width:120px; margin-top: 8px" type="primary" @click="userLogin()">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<style>
    @import '../css/Login.css';

</style>

<script>
    export default {
        created: function () {
            this.loading = true;

            // 初始化
            this.$axios({
                method: 'post',
                url: '/init',
                data: {}
            }).then((response) => {
                if (response.status === 200) {
                    this.resInit = response.data;

                    if (response.data.result_code == 0) {
                        this.$router.push({
                            path: 'manage'
                        });
                    } else if (response.data.result_code == 1) {
                        this.getCaptch();
                    } else {
                        this.$message({
                            title: '12306信息',
                            message: this.resInit.result_message,
                            type: 'warning'
                        });
                    }
                    this.loading = false;
                }
            }).catch((error) => {
                this.loading = false;
                this.$message({
                    title: '警告',
                    message: '服务器无响应',
                    type: 'warning'
                });
            });
        },

        methods: {
            // 显示密码
            showPass: function showPass() {
                if (this.showPassType === 'password') {
                    this.showPassType = 'text';
                } else {
                    this.showPassType = 'password';
                }
            },

            // 得到验证码
            getCaptch: function getCaptch() {
                if (this.resInit.result_code == 1) {
                    this.$axios({
                        method: 'post',
                        url: '/captach'
                    }).then((response) => {
                        if (response.status === 200) {
                            this.userData.pos0 = false;
                            this.userData.pos1 = false;
                            this.userData.pos2 = false;
                            this.userData.pos3 = false;
                            this.userData.pos4 = false;
                            this.userData.pos5 = false;
                            this.userData.pos6 = false;
                            this.userData.pos7 = false;
                            this.userData.posStatus = [
                                false, false, false, false, false, false, false, false
                            ]

                            this.captchImg = 'background-image: url(' +
                                'data:image/jpeg;base64,' +
                                response.data + ')';
                        }
                    }).catch((error) => {
                        console.error(error);
                        return false;
                    });
                } else {
                    this.$message({
                        title: '12306信息',
                        message: resInit.result_message,
                        type: 'warning'
                    });
                }
            },

            // 选择验证码
            clickCaptch: function clickCaptch(itemID) {
                this.userData.posStatus[itemID] = !this.userData.posStatus[itemID];
                this.userData.pos0 = this.userData.posStatus[0];
                this.userData.pos1 = this.userData.posStatus[1];
                this.userData.pos2 = this.userData.posStatus[2];
                this.userData.pos3 = this.userData.posStatus[3];
                this.userData.pos4 = this.userData.posStatus[4];
                this.userData.pos5 = this.userData.posStatus[5];
                this.userData.pos6 = this.userData.posStatus[6];
                this.userData.pos7 = this.userData.posStatus[7];
            },

            // 登录
            userLogin: function userLogin() {
                this.loading = true;
                this.userData.captchpos = '';

                let message = '';
                let posStr = '';
                let posX = '';
                let posY = '';

                for (let i = 0; i < this.userData.posStatus.length; i++) {
                    if (this.userData.posStatus[i]) {
                        posX = parseInt(37 + (i % 4) * 74);
                        posY = parseInt(40 + (i / 4) * 50);
                        posStr += posX + ',' + posY + ',';
                    }
                    this.userData.captchpos = posStr.substring(0, posStr.length - 1);
                }

                if (this.userData.captchpos.length == 0) {
                    message += '请勾选验证码！\n';
                }

                if (this.userData.username.length == 0) {
                    message += '请输入用户名！\n';
                }

                if (this.userData.password.length == 0) {
                    message += '请输入密码！\n';
                }

                if (message.length != 0) {
                    this.$message({
                        title: '警告',
                        message: message,
                        type: 'warning'
                    });
                    this.loading = false;
                    return;
                }

                if (this.resInit.result_code == 1) {
                    this.$axios({
                        method: 'post',
                        url: '/login',
                        data: {
                            username: this.userData.username,
                            password: this.userData.password,
                            pos: this.userData.captchpos
                        }
                    }).then((response) => {
                        if (response.status === 200) {
                            this.$message({
                                title: '12306信息',
                                message: response.data.result_message,
                                type: 'warning'
                            });

                            switch (parseInt(response.data.result_code)) {
                                // 登录成功
                                case 0:
                                    this.$router.push({
                                        path: 'manage'
                                    });
                                    break;

                                default:
                                    this.getCaptch();
                                    break;
                            }
                            this.loading = false;
                            return;
                        }
                    }).catch((error) => {
                        console.error(error);
                        this.loading = false;
                        return;
                    });
                } else {
                    this.$message({
                        title: '12306信息',
                        message: resInit.result_message,
                        type: 'warning'
                    });
                    this.loading = false;
                    return;
                }

                this.userData.username = '';
            }

        },

        data() {
            return {
                isInit: false,
                loading: false,
                resInit: {
                    result_message: '',
                    result_code: 1
                },

                showPassType: 'password',
                captchImg: '',

                userData: {
                    username: '',
                    password: '',
                    captchpos: '',
                    posStatus: [
                        false, false, false, false, false, false, false, false
                    ],
                    pos0: false,
                    pos1: false,
                    pos2: false,
                    pos3: false,
                    pos4: false,
                    pos5: false,
                    pos6: false,
                    pos7: false,
                }
            }
        }
    };

</script>

